<template lang="jade">
  div.wizard
    div.header_panel.weui_media_box
      div.action_btns
        span.prevBtn(@click="prevStep") {{currStep === 0 ? '取消' : '上一步'}}
        span.nextBtn(@click="nextStep") {{wizardSteps.steps[currStep].completed ? '保存' : '下一步'}}
    
    div.custom_panel
      div.title
        span {{wizardSteps.title}}({{currStep+1}}/{{wizardSteps.steps.length}})
      div.componnet
        keep-alive
          component(:is="wizardSteps.steps[currStep].component")
</template>
<script>

import { mapState, mapActions } from 'vuex'
import Util from '../Util/util'

import Program_edit_name from './program_edit_name.vue'
import Program_edit_workout from './program_edit_workout.vue'
import Program_preview from './program_preview.vue'

export default {
  methods: {
    ...mapActions(['saveProgram']),
    init() {
      this.currStep = this.wizardSteps.currStep
    },

    prevStep() {
      if(this.currStep === 0) {
        console.log('cancel, back to main menu');
        this.$router.push({path: '/'})
      } else {
        this.currStep--;
      }
    },

    nextStep() {
      if(this.wizardSteps.steps[this.currStep].completed) {
        console.log('save data to backend');
        let idWorkouts = Util.convertObjListToIdList(this.program.workouts)
        let program = Object.assign({}, this.program, {
          workouts: idWorkouts
        })
        this.saveProgram(program).then(resp => {
          this.$router.push({path: '/'});
        })
      } else {
        this.currStep++;
      }
    }
  },
  computed: {
    ...mapState(['program']),
    wizardSteps: function() {
      const PATHTYPE = {
        CREATE: {
          path: 'create',
          title: '新建Program',
          pageId: 0
        },
        EDIT: {
          path: 'edit',
          title: '编辑Program',
          pageId: 1
        }
      }

      let path = this.$route.path;
      let pathParse = path.split('/')

      let wizardSteps = {
        currStep: pathParse[1] === PATHTYPE.CREATE.path ? PATHTYPE.CREATE.pageId : PATHTYPE.EDIT.pageId,
        title: pathParse[1] === PATHTYPE.CREATE.path ? PATHTYPE.CREATE.title : PATHTYPE.EDIT.title,
        steps: [{
          id: 0,
          component: Program_edit_name,
          completed: false
        }, {
          id: 1,
          component: Program_edit_workout,
          completed: false
        }, {
          id: 2,
          component: Program_preview,
          completed: true
        }]
      };

      return wizardSteps;
    }
  },
  props: [],
  watch: {},
  components: {},
  events: {},
  data() {
    return {
      currStep: 0
    }
  },
  mounted() {
    this.init();
  }
}
</script>
<style scoped>
.header_panel {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 3vh;
  background-color: #ffffff;
  border-bottom: 1px solid #d9d9d9;
  z-index: 99;
}

.header_panel .action_btns{
  display: flex;
  justify-content: space-between;
  
}

.wizard .title {
  text-align: center;
  line-height: 5vh;
  height: 5vh;
}

.prevBtn, .nextBtn {
  width: 4rem;
}

.custom_panel {
  padding-top: 8vh;
}

.custom_panel .componnet{
  height: 87vh;
}
</style>
